<template>
	<view >
		 <view class="status_bar"></view>
		 <view class="top" >
			 <u-icon size="50rpx" name="arrow-left" @click="toBack"></u-icon>
			 <text style="text-align: center;font-weight: bold;padding-right: 280rpx;">进行中的事项</text>
			 <!-- <u-icon size="50rpx" style="float: right;" name="plus" @click="addEvent"></u-icon> -->
		 </view>
		 <!-- v-for="(item, index) in list" -->
		 <view v-for="(item, index) in myrecentarticles">
			 <view class="list">
				 <view style="display: flex;justify-content: space-between;box-sizing: border-box;padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx;">
					 <text style="font-weight: bold;" >{{item.title}}</text>
					 <u-icon size="50rpx" name="edit-pen" @click="edit(index)"></u-icon>
				 </view>
				 <view style="padding-left: 20rpx;">时间： {{item.startTime!=null?item.startTime.replace("T"," "):"待定"}}</view>
				 <u-line class="distance"> </u-line>
				 <view style="display: flex;padding-left: 20rpx;padding-top: 20rpx;"> 
				 <view>地点：</view>
				 <u-icon name="map"></u-icon>
				 <view>{{item.location}}</view>
				 </view>
				 <u-line class="distance"> </u-line>
				 <view style="display: flex;">
				 <view style="padding-left: 20rpx;padding-top: 20rpx;">备注：</view>
				 <view style="padding-left: 20rpx;padding-top: 20rpx;"> </view>
				 </view>
				 <u-line class="distance"> </u-line>
				 <view style="display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;padding-top: 10rpx;padding-bottom: 20rpx;">
					 <view style="padding-left: 20rpx;">状态栏提醒</view>
					 <view>  {{item.startTime!=null?item.startTime.replace("T"," "):"待定"}}</view>
					 <switch  style="transform:scale(0.7);"></switch>
				 </view>
			 </view>
		 </view>
		 <view  v-for="(item, index) in myrecentactivities">
		 			 <view class="list">
		 				 <view style="display: flex;justify-content: space-between;box-sizing: border-box;padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx;">
		 					 <text style="font-weight: bold;" >{{item.title}}</text>
		 					 <u-icon size="50rpx" name="edit-pen" @click="edit1(index)"></u-icon>
		 				 </view>
		 				 <view style="padding-left: 20rpx;">时间：{{item.startTime!=null?item.startTime.replace("T"," "):"待定"}}</view>
		 				 <u-line class="distance"> </u-line>
		 				 <view style="display: flex;padding-left: 20rpx;padding-top: 20rpx;"> 
		 				 <view>地点：</view>
		 				 <u-icon name="map"></u-icon>
		 				 <view>{{item.address}}</view>
		 				 </view>
		 				 <u-line class="distance"> </u-line>
		 				 <view style="display: flex;">
		 				 <view style="padding-left: 20rpx;padding-top: 20rpx;">备注：</view>
		 				 <view style="padding-left: 20rpx;padding-top: 20rpx;"> </view>
		 				 </view>
		 				 <u-line class="distance"> </u-line>
		 				 <view style="display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;padding-top: 10rpx;padding-bottom: 20rpx;">
		 					 <view style="padding-left: 20rpx;">状态栏提醒</view>
		 					 <view>  {{item.startTime!=null?item.startTime.replace("T"," "):"待定"}}</view>
		 					 <switch  style="transform:scale(0.7);"></switch>
		 				 </view>
		 			 </view>
		 </view>
		 <u-popup :show="show" mode="center" custom-style="height: 750rpx;width:650rpx" round="20">
			 <view>
			 <view style="display: flex;justify-content: space-between;box-sizing: border-box;padding-left: 20rpx;padding-right: 20rpx;padding-top: 30rpx;height: auto;">
			 					 <view style="font-weight: bold;">事件标题</view>
								 <input style="font-size: 35rpx;" v-model="form.title"  ></input>
			 					 <!-- <u-icon size="50rpx" name="trash"></u-icon> -->
			 </view>
			 <u-line class="distance"></u-line>
			 <view style="display: flex;padding-left: 20rpx;padding-top: 20rpx;" @click="chooseTime()">
				 <view style="padding-right: 20rpx;">时间 : </view>
				 <input v-model="form.startTime" placeholder="yyyy-mm-dd hh:MM" ></input>
			 </view>
			 <u-line class="distance"> </u-line>
			 <view style="display: flex;padding-left: 20rpx;padding-top: 20rpx;"> 
			 <view>地点：</view>
			 <u-icon name="map"></u-icon>
			 <input v-model="form.location"></input>
			 </view>
			 <u-line class="distance"> </u-line>
			 <view style="padding-left: 20rpx;padding-top: 20rpx;">
				 <view style="padding-bottom: 20rpx;">备注</view>
				 <view>
				 <textarea  v-model="form.addtion"  style="background-color: aliceblue;position: absolute;width: 550rpx;padding-top: 20rpx;height: 200rpx;"></textarea>
				 </view>
			 </view>
			 <view style="display: flex;justify-content: space-between;margin-top: 240rpx;">
				 <button style="background: linear-gradient(to right,#dff0fc,#fedac4);width: 200rpx;" @click="update">保存</button>
				 <button style="width: 200rpx;" @click="display">取消</button>
			 </view>
			 </view>
		 </u-popup>
<!-- 		 <view>
		 	<uv-datetime-picker
		 		ref="datetimePicker1"
		 		v-model="value1"
		 		mode="datetime"
		 		@confirm="confirm"
		 		@cancel="cancel"
		 		@change="change"
		 		@close="close"
		 		round="20"
				style="z-index: 10000;"
		 	></uv-datetime-picker>
		 </view> -->
		 
	</view>
</template>

<script>
	import {  timeFormat} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		data() {
			return {
				list: [
					{title:"1",time:"10月11日",location:"郑州",addition:"hh",remindtime:"20"},
					{title:"2",time:"10月11日",location:"郑州",addition:"hh",remindtime:"20"},
					{title:"3",time:"10月11日",location:"郑州",addition:"hh",remindtime:"20"},
				],
				show: false,
				form: {
					id:'',
					title: '',
					startTime: '',
					location: '',
					addtion: '',
					remindtime: ''
				},
				myrecentarticles:{},
				myrecentactivities:{},
				updatestatus:'',
				value1: Number(new Date().setSeconds(0)),
				
			}
		},
		onLoad(e){
			this.myrecentarticles=JSON.parse(e.myrecentarticles)
			this.myrecentactivities=JSON.parse(e.myrecentactivities)
		},
		methods: {
			toBack(){
				uni.navigateBack({
					url: '/pages/mine/index'
				})
			},

			addEvent(){
				this.show=true
				this.form.title=''
				this.form.time=''
				this.form.location=''
				this.form.addtional=''
				this.form.remindtime=''

			},
			display(){
				this.show=false
			},
			edit(index){
				this.show=true
				this.form.id=this.myrecentarticles[index].id
				this.form.title=this.myrecentarticles[index].title
				this.form.startTime=this.myrecentarticles[index].startTime||"待定"
				this.form.location=this.myrecentarticles[index].location
				this.form.addtion=this.myrecentarticles[index].addition
				this.updatestatus=1
			},
			edit1(index){
				this.show=true
				this.form.id=this.myrecentactivities[index].id
				this.form.title=this.myrecentactivities[index].title
				this.form.startTime=this.myrecentactivities[index].startTime
				this.form.location=this.myrecentactivities[index].address
				this.form.addtion=this.myrecentactivities[index].addition
				this.updatestatus=0
			},
			update(){
				
				if(this.form.startTime=="待定"){this.form.startTime=""}
				this.form.startTime=timeFormat(this.form.startTime,'yyyy-mm-dd hh:MM')
				if(this.updatestatus==1){this.$H.post('articles/update',this.form).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:"保存成功",
							icon:"success"
						})
						setTimeout(function () {
						                        uni.reLaunch({
						                        	url:'/pages/mine/index'
						                        })
						                    }, 1000);
					}
				})
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.top{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		
	    align-items: center;
		height: 200rpx;
		padding: 0 30rpx;
		background: linear-gradient(to right,#dff0fc,#fedac4);
	}
	.list{
		width: 88%;
		margin: auto;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		
	}
	.distance{
		padding-top: 20rpx;
		
	}

</style>
